<template>
  <div id="app1">
    <el-row class="tac">
      <el-col :span="12" id="left">
        <el-menu default-active="2" class="el-menu-vertical-demo">
          <el-menu-item index="3">
            <span slot="title">欢迎光临:&nbsp;{{ username }}</span>
          </el-menu-item>
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span class="span">页面管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-2" id="el" @click="myshop1()"
                >查看美食</el-menu-item
              >
              <el-menu-item index="1-3" id="el" @click="myshop2()"
                >我的订单</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
    <div style="width: 1201px;">
      <h1 style="text-align: center; line-height: 100px;">我的订单</h1>
      <tr class="tr1">
        <td>商品</td>
        <td>价格</td>
        <td>状态</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in list" :key="item._id">
        <td>{{ item.goods_id }}</td>
        <td>{{ item.gprice }}</td>
        <td>{{ item.goodsintroduction }}暂无物流消息</td>
        <td>
          <el-button
            style="color: black;"
            :plain="true"
            @click="quxiao(item._id)"
          >
            取消订单
          </el-button>
        </td>
      </tr>
    </div>

    <div class="tuichu" @click="tuichu()">
      <el-button type="primary">退出登录</el-button>
    </div>
  </div>
</template>

<script>
import a from "../../model/goodsModel.js";
//import nav from '../../components/nav.vue'
export default {
  //components: {
  //  'v-nav':nav
  //},
  data() {
    return {
      username: "用户名",
      list: []
    };
  },
  methods: {
    handleCommand(command) {
      this.$message("click on item " + command);
    },
    myshop1() {
      this.$router.push("/customer");
    },
    myshop2() {
      this.$router.push("/customer/wodedingdan");
    },
    tuichu() {
      window.localStorage.removeItem("info");
      this.$router.push("/login");
    },
    async quxiao(goods_id) {
      let user_id = window.localStorage.getItem("info");
      //删除订单
      let { data } = await a.shanchu2(goods_id);

      this.list = [];

      //重新渲染
      let { data: data2 } = await a.get(user_id);
      let list = data2.data;
      for (var item of list) {
        if (item.user_id == user_id) {
          this.list.push(item);
        }
      }
      this.$message({
        message: "取消成功",
        type: "success"
      });
    }
  },
  async created() {
    let info = window.localStorage.getItem("info");
    this.username = info;
    let user_id = window.localStorage.getItem("info");

    let { data } = await a.get(user_id);
    let list2 = data.data;
    for (var item of list2) {
      let list3 = item;
      if (item.user_id == user_id) {
        this.list.push(item);
      }
    }
  }
};
</script>

<style>
.el-button {
  background-color: red;
}

.el-button span {
  color: black;
}
.tuichu {
  display: inherit;
  position: fixed;
  top: 20px;
  right: 50px;
}

tr {
  width: 980px;
  display: flex;
  justify-content: center;
  line-height: 50px;
  padding-left: 20px;
}

tr td {
  flex: 1;
  text-align: center;
  border: 1px solid black;
}

#el {
  color: #fff;
}

.el-menu-item.is-active,
.span {
  background-color: rgb(10, 6, 51);
}

.el-button--primary {
  margin-bottom: 20px;
}

.contain {
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid gray;
}

.el-breadcrumb {
  padding-top: 20px;
  height: 40px;
}

.el-dropdown {
  position: relative;
  right: -720px;
  top: 0;
}

.tac {
  float: left;
}

#right {
  float: left;
  padding-left: 20px;
  width: 1000px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.right .el-col-12 {
  width: 200px;
  background-color: blue;
}

.dashboard-text {
  width: 200px;
  background-color: blue;
}

.el-menu-vertical-demo {
  height: 100vh;
  width: 200px;
  background-color: rgb(48, 65, 86);
}

span {
  color: white;
}

li {
  background-color: rgb(48, 65, 86);
  color: white;
}

li.el-submenu.is-active.is-opened {
  overflow: hidden;
}

.el-submenu .is-opened {
  overflow: hidden;
}

.el-submenu .el-menu-item {
  padding: 0;
}
</style>
